Component({
  properties: {
    current: {
      type: Number,
      value: 0,
      observer: 'setCurrentIndex'
    },
    multiple: {
      type: Number,
      value: 1
    },
    interval: {
      type: Number,
      value: 5000
    },
    autoplay: Boolean,
    swiperList: {
      type: Array,
      value: []
    },
    duration: {
      type: Number,
      value: 500
    },
    height: {
      type: null,
      observer: 'setSwiperStyle'
    },
    nextMargin: {
      type: null,
      observer: 'setNextMargin'
    }
  },
  data: {
    currentIndex: 0
  },
  methods: {
    swiperChange(e) {
      this.setCurrentIndex(e.detail.current)
      this.triggerEvent('onchange', { current: e.detail.current })
    },
    swiperTransition(e) {
      this.triggerEvent('ontransition', e.detail)
    },
    swiperAnimationFinish(e) {
      this.triggerEvent('onanimationfinish', e.detail)
    },
    setCurrentIndex(index) {
      this.setData({
        currentIndex: index
      })
    },
    setSwiperStyle() {
      const { height } = this.data
      let style = ''
      if (this.isDef(height)) {
        style += `height:${this.addUnit(height)}`
      }
      this.setData({ swiperStyle: style })
    },
    setNextMargin() {
      const { nextMargin } = this.data
      if (this.isDef(nextMargin)) {
        this.setData({ computedNextMargin: this.addUnit(nextMargin) })
      }
    },
    isDef(value) {
      return value !== undefined && value !== null
    },
    isNumber(value) {
      return /^\d+(\.\d+)?$/.test(value)
    },
    addUnit(value) {
      if (this.isDef(value)) {
        value = String(value)
        return this.isNumber(value) ? `${value}rpx` : value
      }
    }
  }
})
